|
1
|
|
|
/** global: g_oConfigFromPHP */ |
|
2
|
|
|
/** global: FormDataValidator */ |
|
3
|
|
|
/** global: jscolor */ |
|
4
|
|
|
/** global: CKEDITOR */ |
|
5
|
|
|
/** global: FormCKEditor */ |
|
6
|
|
|
/** global: RichFmConnector */ |
|
7
|
|
|
/** global: FormPicker */ |
|
8
|
|
|
|
|
9
|
|
|
var g_oCKEdit = null; |
|
10
|
|
|
var g_FDP = null; |
|
11
|
|
|
|
|
12
|
|
|
/** |
|
13
|
|
|
* post load some additional JS scripts after DOM is loaded... |
|
14
|
|
|
*/ |
|
15
|
|
|
document.addEventListener('DOMContentLoaded', loadScriptfiles); |
|
16
|
|
|
|
|
17
|
|
|
function loadScriptfiles() |
|
18
|
|
|
{ |
|
19
|
|
|
loadScript(g_oConfigFromPHP.JavaScript.Path + 'FormDataValidator.js'); |
|
20
|
|
|
if (g_oConfigFromPHP.Color !== undefined) { |
|
21
|
|
|
loadScript(g_oConfigFromPHP.JavaScript.Path + 'jscolor.js'); |
|
22
|
|
|
} |
|
23
|
|
|
|
|
24
|
|
|
if (g_oConfigFromPHP.DTSel !== undefined) { |
|
25
|
|
|
loadScript(g_oConfigFromPHP.JavaScript.Path + 'dtsel.js'); |
|
26
|
|
|
loadScript(g_oConfigFromPHP.JavaScript.Path + 'FormPicker.js'); |
|
27
|
|
|
} |
|
28
|
|
|
|
|
29
|
|
|
if (g_oConfigFromPHP.RichFilemanager !== undefined) { |
|
30
|
|
|
loadScript(g_oConfigFromPHP.JavaScript.Path + 'RichFmConnector.js'); |
|
31
|
|
|
} |
|
32
|
|
|
|
|
33
|
|
|
if (g_oConfigFromPHP.CKEditor !== undefined) { |
|
34
|
|
|
loadScript(g_oConfigFromPHP.CKEditor.Path + 'ckeditor.js'); |
|
35
|
|
|
loadScript(g_oConfigFromPHP.JavaScript.Path + 'FormCKEdit.js'); |
|
36
|
|
|
} |
|
37
|
|
|
} |
|
38
|
|
|
|
|
39
|
|
|
/** |
|
40
|
|
|
* Initialization. |
|
41
|
|
|
* For initialization we lisen to the window onload-event. At this point the |
|
42
|
|
|
* additionally loaded script files from the DOMContentLoaded-event should also be |
|
43
|
|
|
* available. |
|
44
|
|
|
* Dependent on the config from PHP we have to initialize some modules: |
|
45
|
|
|
* - FormDataValidation needs no initialization |
|
46
|
|
|
* - if form contains colorpicker(s) we have to initialize them |
|
47
|
|
|
* - contained date or time pickers also needs initialization |
|
48
|
|
|
* - embedded CKEditor have to be loaded and configured |
|
49
|
|
|
* - add Eventlistener to display value of range elements in assigned value label |
|
50
|
|
|
*/ |
|
51
|
|
|
window.addEventListener('load', initFormGenerator); |
|
52
|
|
|
|
|
53
|
|
|
function initFormGenerator() |
|
54
|
|
|
{ |
|
55
|
|
|
if (g_oConfigFromPHP.Color !== undefined) { |
|
56
|
|
|
jscolor.presets.default = g_oConfigFromPHP.Color; |
|
57
|
|
|
jscolor.init(); |
|
58
|
|
|
} |
|
59
|
|
|
|
|
60
|
|
|
if (g_oConfigFromPHP.DTSel !== undefined) { |
|
61
|
|
|
g_FDP = new FormPicker(g_oConfigFromPHP); |
|
62
|
|
|
g_FDP.init(); |
|
63
|
|
|
} |
|
64
|
|
|
|
|
65
|
|
|
if (g_oConfigFromPHP.CKEditor !== undefined) { |
|
66
|
|
|
g_oCKEdit = new FormCKEditor(g_oConfigFromPHP, CKEDITOR); |
|
67
|
|
|
g_oCKEdit.load(); |
|
68
|
|
|
} |
|
69
|
|
|
|
|
70
|
|
|
var oRanges = document.getElementsByTagName('input'); |
|
71
|
|
|
var iLength = oRanges.length; |
|
72
|
|
|
for (var i = 0; i < iLength; i++) { |
|
73
|
|
|
if (oRanges[i].type == 'range') { |
|
74
|
|
|
oRanges[i].addEventListener('change', rangeChanged); |
|
75
|
|
|
oRanges[i].addEventListener('input', rangeChanged); |
|
76
|
|
|
} |
|
77
|
|
|
} |
|
78
|
|
|
|
|
79
|
|
|
var oImages = document.getElementsByTagName('img'); |
|
80
|
|
|
iLength = oImages.length; |
|
81
|
|
|
for (var i = 0; i < iLength; i++) { |
|
|
|
|
|
|
82
|
|
|
oImages[i].addEventListener('click', pickerClicked); |
|
83
|
|
|
} |
|
84
|
|
|
} |
|
85
|
|
|
|
|
86
|
|
|
/** |
|
87
|
|
|
* Event - handler for the 'change' and 'input' event trigerred by each range element in the form. |
|
88
|
|
|
* If there exist a label element that is assigned to the triggering range through the 'for' attrib, |
|
89
|
|
|
* the value of the range element is set as content of the label. |
|
90
|
|
|
*/ |
|
91
|
|
|
function rangeChanged() |
|
92
|
|
|
{ |
|
93
|
|
|
var oRange = this; |
|
94
|
|
|
var oLabels = document.getElementsByTagName('label'); |
|
95
|
|
|
for (var i = 0; i < oLabels.length; i++) { |
|
96
|
|
|
if (oLabels[i].htmlFor == oRange.id) { |
|
97
|
|
|
oLabels[i].innerHTML = this.value; |
|
98
|
|
|
} |
|
99
|
|
|
} |
|
100
|
|
|
} |
|
101
|
|
|
|
|
102
|
|
|
/** |
|
103
|
|
|
* Event - handler for the 'click' event on img elements. |
|
104
|
|
|
* if the element has the attribute 'data-for' set, we just try to set the focus to |
|
105
|
|
|
* that element -usually there should popup the assigend picker. |
|
106
|
|
|
*/ |
|
107
|
|
|
function pickerClicked() |
|
108
|
|
|
{ |
|
109
|
|
|
var oImg = this; |
|
110
|
|
|
if (oImg.getAttribute('data-for') !== null) { |
|
111
|
|
|
var oInput = document.getElementById(oImg.getAttribute('data-for')); |
|
112
|
|
|
if (oInput !== null) { |
|
113
|
|
|
oInput.focus(); |
|
114
|
|
|
} |
|
115
|
|
|
} |
|
116
|
|
|
} |
|
117
|
|
|
|
|
118
|
|
|
/** |
|
119
|
|
|
* Helper function to create Error/Warning-Message in the document. |
|
120
|
|
|
* The Messeage is only created, if the debug mode is enabled. |
|
121
|
|
|
* @param string msg text to display |
|
122
|
|
|
* @param string level level for the message |
|
123
|
|
|
*/ |
|
124
|
|
|
function displayJSError(msg, level) |
|
125
|
|
|
{ |
|
126
|
|
|
if (g_oConfigFromPHP.DebugMode) { |
|
127
|
|
|
let div = document.createElement('div'); |
|
128
|
|
|
div.id = 'JSError'; |
|
129
|
|
|
let header = document.createElement('h1'); |
|
130
|
|
|
div.appendChild(header); |
|
131
|
|
|
let body = document.createElement('p'); |
|
132
|
|
|
div.appendChild(body); |
|
133
|
|
|
header.innerHTML = 'Javascript ' + level; |
|
134
|
|
|
body.innerHTML = msg; |
|
135
|
|
|
document.body.insertBefore(div, document.body.firstChild); |
|
136
|
|
|
} |
|
137
|
|
|
} |
|
138
|
|
|
|
|
139
|
|
|
/** |
|
140
|
|
|
* Validate the form. |
|
141
|
|
|
*/ |
|
142
|
|
|
function validateForm() |
|
143
|
|
|
{ |
|
144
|
|
|
var FDV = new FormDataValidator(g_oConfigFromPHP.FormDataValidation); |
|
145
|
|
|
return FDV.validate(); |
|
146
|
|
|
} |
|
147
|
|
|
|
|
148
|
|
|
/** |
|
149
|
|
|
* Call the filemanager to browse for a file on the server. |
|
150
|
|
|
*/ |
|
151
|
|
|
function browseServer(editID, imgID, strExpand) |
|
152
|
|
|
{ |
|
153
|
|
|
let FmConnector = new RichFmConnector(g_oConfigFromPHP.RichFilemanager.Path); |
|
154
|
|
|
FmConnector.editID = editID; |
|
155
|
|
|
FmConnector.imgID = imgID; |
|
156
|
|
|
FmConnector.browseServerModal(strExpand); |
|
157
|
|
|
} |
|
158
|
|
|
|
|
159
|
|
|
/** |
|
160
|
|
|
* Handler for the DTU button (Date,Time User) |
|
161
|
|
|
*/ |
|
162
|
|
|
function onInsertDateTimeUser(id, strUsername) |
|
163
|
|
|
{ |
|
164
|
|
|
let oEdit = document.getElementById(id); |
|
165
|
|
|
if (oEdit) { |
|
166
|
|
|
let date = new Date(); |
|
167
|
|
|
let strValue = oEdit.innerHTML = date.toLocaleString(); |
|
168
|
|
|
if (strUsername != '') { |
|
169
|
|
|
strValue += ' / ' + strUsername; |
|
170
|
|
|
} |
|
171
|
|
|
oEdit.value = strValue; |
|
172
|
|
|
} |
|
173
|
|
|
} |
|
174
|
|
|
|
|
175
|
|
|
/** |
|
176
|
|
|
* Handler for the reset - Button. |
|
177
|
|
|
* Used to to reset the content of readonly-inputs or images that get the value |
|
178
|
|
|
* from filebrowser or another picker etc. |
|
179
|
|
|
*/ |
|
180
|
|
|
function resetElement(id) |
|
181
|
|
|
{ |
|
182
|
|
|
let oElement = document.getElementById(id); |
|
183
|
|
|
if (oElement) { |
|
184
|
|
|
if (oElement.tagName.toLowerCase() === 'img') { |
|
185
|
|
|
oElement.src = oElement.getAttribute('data-default'); |
|
186
|
|
|
resetElement(oElement.getAttribute('data-bound-to')); |
|
187
|
|
|
} else { |
|
188
|
|
|
oElement.value = ''; |
|
189
|
|
|
} |
|
190
|
|
|
} |
|
191
|
|
|
} |
|
192
|
|
|
|
|
193
|
|
|
/** |
|
194
|
|
|
* Adjust the height of two columns. |
|
195
|
|
|
*/ |
|
196
|
|
|
function adjustColumnHeight(col1, col2) |
|
197
|
|
|
{ |
|
198
|
|
|
var oCol1 = document.getElementById(col1); |
|
199
|
|
|
var oCol2 = document.getElementById(col2); |
|
200
|
|
|
if (oCol1 && oCol2) { |
|
201
|
|
|
if (oCol1.offsetHeight > oCol2.offsetHeight) { |
|
202
|
|
|
oCol2.style.height = oCol1.offsetHeight + 'px'; |
|
203
|
|
|
} else { |
|
204
|
|
|
oCol1.style.height = oCol2.offsetHeight + 'px'; |
|
205
|
|
|
} |
|
206
|
|
|
} |
|
207
|
|
|
} |
|
208
|
|
|
|
|
209
|
|
|
/** |
|
210
|
|
|
* Dynamic loading of additional scripts. |
|
211
|
|
|
*/ |
|
212
|
|
|
function loadScript(strScriptfile) |
|
213
|
|
|
{ |
|
214
|
|
|
var oScript = document.createElement('script'); |
|
215
|
|
|
document.head.appendChild(oScript); |
|
216
|
|
|
// oScript.onload = function() {console.log('script ' + strScriptfile + ' loaded!');}; |
|
217
|
|
|
oScript.type = 'text/javascript'; |
|
218
|
|
|
oScript.src = strScriptfile; |
|
219
|
|
|
} |
|
220
|
|
|
|
|
221
|
|
|
|
Stefanius67 /
Formgenerator
This check looks for variables that are declared in multiple lines. There may be several reasons for this.
In the simplest case the variable name was reused by mistake. This may lead to very hard to locate bugs.
If you want to reuse a variable for another purpose, consider declaring it at or near the top of your function and just assigning to it subsequently so it is always declared.